<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="noindex, nofollow">
    <link href="/css/login.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"/>
    <title>user login</title>
</head>

<body>
<div class="login-content" style="background-image: url(/img/background.svg);">
    <div class="box">
        <div>
            <img style="width: 20%" class="logo" src="/css-logo.png" alt="Alfresco">
        </div>
        <div class="box-container">
            <div>
                <p class="application-name" style="margin-left: 97px">用户登录页面</p>
            </div>
            <div>
                <form id="kc-form-login" class="form" action="/user/login" method="post">
                    <label for="username"></label><input id="username" class="login-field" placeholder="用户名" type="text"
                                                         name="username" tabindex="1">
                    <div>
                        <label class="visibility" id="v"><img id="vi" src="/img/eye-off.png" alt="eye"></label>
                    </div>
                    <label for="password"></label><input id="password" class="login-field" placeholder="密码"
                                                         type="password" name="password" tabindex="2">
                    <div><a href="/admin/login"  >管理员登录</a></div>
                    <div><a href="/user/register"  >注册</a></div>
                    <input class="submit" type="submit" value="登录" tabindex="3">

                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById("v").addEventListener("click", () => {
        const x = document.getElementById("password");
        const v = document.getElementById("vi");
        if (x.type === "password") {
            x.type = "text";
            v.src = "/img/eye.png";
        } else {
            x.type = "password";
            v.src = "/img/eye-off.png";
        }
    });
</script>
</body>
</html>
